<template>
	<div>
		<el-container class="wrapper">
			<el-aside width="200px">
				<div class="logo">黑马头条</div>
				<!--这里是侧边栏菜单-->
				<el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
					:router="true" :default-active="$route.path">

					<el-menu-item index="/admin/postpage" >
						<i class="el-icon-menu"></i>
						<span slot="title">文章列表</span>
					</el-menu-item>
					<!--@click="$router.push('/admin/postpage')"-->
					<el-menu-item index="/admin/editpage">
						<i class="el-icon-setting"></i>
						<span slot="title">发表文章</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header>
					<img :src="$axios.defaults.baseURL+user.head_img" alt="" />
					<p class="nickname">{{user.nickname}}</p>
					<span class="logout" @click="logOut">退出</span>
				</el-header>
				<el-main>
					<!--这里是面包屑-->
					<el-breadcrumb separator-class="el-icon-arrow-right" class="mianbao">
						<el-breadcrumb-item v-for="(item,index) in $route.matched" :to="item.path">{{item.meta}}</el-breadcrumb-item>
					</el-breadcrumb>
					<!--面包屑组件测试-->
		           <!-- <Mianbao></Mianbao>-->
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
		<!--弹窗提示-->
		<el-dialog title="退出登录提示" :visible.sync="dialogVisible" width="30%">
			<span>您确定要退出登录吗</span>
			<span slot="footer" class="dialog-footer">
                <el-button @click="handleClick">取 消</el-button>
                <el-button type="primary" @click="handleClick">确 定</el-button>
            </span>
		</el-dialog>
		
	</div>
</template>

<script>
	//	引入面包屑组件进行测试
	import Mianbao from "@/components/Mianbaoxie.vue";
	export default {
		components: {
			Mianbao
		},
		data() {
			return {
				user: JSON.parse(localStorage.getItem("userinfo")),
				dialogVisible: false
			}
		},
		mounted() {
			console.log("matched打印", this.$route.matched);
		},
		methods: {
			logOut() {			
				this.dialogVisible = true;

			},
			handleClick(event){
//				console.log("event事件",event.target.innerHTML);
//				让弹窗隐藏
                this.dialogVisible=false;
				if(event.target.innerHTML=="确 定"){
//					清除本地token和userinfo
					localStorage.removeItem("token");
				    localStorage.removeItem("userinfo");
					this.$router.push({path:"/login"});
				}else{
					//取消
					return;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.wrapper {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		/*或者直接设置高度也可以达到目的*/
		height: 100%;
	}
	
	.el-header {
		background-color: #333;
		color: #fff;
		text-align: center;
		line-height: 60px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		img {
			width: 50px;
			height: 50px;
			object-fit: cover;
			border-radius: 50%;
			margin-right: 20px;
		}
		.nickname {
			font-size: 14px;
		}
		.logout {
			font-size: 14px;
			margin-left: 15px;
			cursor: pointer;
			&:active {
				color: orangered;
			}
		}
	}
	
	.el-aside {
		background-color: #222;
		color: #fff;
		text-align: center;
		line-height: 60px;
		font-size: 24px;
		font-weight: 700;
		.el-menu{
			border-right:none;
		}
	}
	
	.el-main {
		background-color: #E9EEF3;
		color: #333;
		position: relative;
		.mianbao{
			position: fixed;
			width:80%;
			z-index: 999;
			padding:20px;
			background-color: #f7f7f7;
			+div{
				margin-top: 80px;
			}
		}
	}
	
	body>.el-container {
		margin-bottom: 40px;
	}
	
	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}
	
	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>